MarketPoint
- Multipurpose Business And Agency HTML Template
- Created: 15/08/2020
- Latest Update: 15/08/2020
- by: LabArtisan
- email: labartisan@labartisan.com
Installation
Follow the steps below to get started with marketpoint - Multipurpose Business And Agency HTML Template :
-
Open the
Package/marketpointFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
-
Make sure you have upload the required files and folders listed below:
-
marketpoint HTML/assets- Stylesheets, JavaScript, Fonts etc Folder -
marketpoint HTML/assets/images- Images Folder -
marketpoint HTML/index.html- Index File/Homepage
-
- You're now ready to go..! Start adding your Content and show off your Brand New Website.
Features At A Glance
- HTML5 & CSS3 & jQuery
- Modern And Creative Design
- Universal menu
- 100% Responsive
- Well documented
- Complete SASS files
- Bootstrap 4
- IcoFont Used
- SwiperSlider Used
- Google Font Used
- Lightcase Used
- Google Map
- Eye Catching Design
- W3C Valid Code
HTML Structure
marketpoint has follows a simple coding structure. here is the sample:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- google fonts --> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet"> <link rel="shortcut icon" type="image/x-icon" href="assets/css/favicon.png"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/icofont.min.css"> <link rel="stylesheet" href="assets/css/lightcase.css"> <link rel="stylesheet" href="assets/css/swiper.min.css"> <link rel="stylesheet" href="assets/css/style.css"> <title>MarketPoint</title> </head> <body> <!-- preloader start here --> <div class="preloader"> <div class="preloader-inner"> <div class="preloader-icon"> <span></span> <span></span> </div> </div> </div> <!-- preloader ending here --> <!-- desktop menu start here --> <header class="header-section transparent-header header-style-2 innerpage-header"> <div class="container"> <div class="primary-menu"> <div class="logo"> <a href="index.html"><img src="assets/images/header/logo/02.png" alt="logo"></a> </div> <div class="main-area"> <div class="main-menu"> <ul class="lab-ul"> <li><a href="#0">Home</a> <ul class="lab-ul"> <li><a href="index.html">Home One</a></li> <li><a href="index-2.html">Home Two</a></li> <li><a href="index-3.html">Home Three</a></li> <li><a href="index-4.html">Home Four</a></li> </ul> </li> <li> <a href="#0">Services</a> <ul class="lab-ul"> <li><a href="service.html">Service Style One</a></li> <li><a href="service-2.html">Service Style Two</a></li> <li><a href="service-single.html">Service Details</a></li> </ul> </li>
CSS Structure
We are using several CSS files in this Template. labartisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
CSS Fiile Included
- Favicon used
- Animate css used
- Bootstrap css used
- Icofont used
- Lightcase used
- Swiper Slider used
- Style CSS used
- and some other necessary css files
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
/*! Template Name: marketpoint Template URI: https://themeforest.net/user/labartisan Author: labartisan.net Author URI: https://themeforest.net/user/labartisan Description: MarketPoint - Multipurpose Business And Agency HTML Template Version: 1.0.0 Text Domain: marketpoint Tags: agency, business, corporate, creative, design, illustration, marketing, multipurposeAgency landing, portfolio, psd, seo, startup, ui */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- # Normalize # Typography # Global CSS # Header CSS *Mobile Header # Banner Section # Page Header # Service Section * Style-1 * Style-2 * Style-3 * Style-4 * Service Single # About Section * Style-1 * Style-2 * Style-3 * Style-4 # Clients Range Section * Style-1 * Style-2 * Style-3 # Market Agency Section * Style-1 * Style-2 # Pricing Table # Testimonial Section * Style-1 * Style-2 * Style-3 # Sponsor Section * Style-1 * Style-2 # Portfolio Section * Style-1 * Style-2 * Style-3 * Style-4 * Style-5 * Portfolio Single # Team Member Section * Style-1 * Style-2 * Team Single # Case Single Section # Consultation Section # Business Contact # Business Analysis * Style-1 * Style-2 # blog-section * Style-1 * blog-page * blog-single # Widget # Maps Section # News Letter # Dashbord Section # Shop Page # Shop Single # Shop Cart # Contact Us # Four Zero Section --------------------------------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 0; padding: 0; line-height: 28px; box-sizing: border-box; background: #fff; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ body, button, input, select, optgroup, textarea { color: #696969; font-family: "Roboto", sans-serif; font-size: 16px; line-height: 28px; } h1, h2, h3, h4, h5, h6 { clear: both; font-weight: 700; line-height: 1.4; font-family: "Roboto", sans-serif; color: #000000; .header-section .primary-menu .main-area .main-menu ul li.menu-item-has-children > a::after { top: 50%; right: 20px; transform: translateY(-50%); font-weight: 400; content: "" !important; font-family: IcoFont !important; } @media (min-width: 992px) { .header-section .primary-menu .main-area .main-menu ul li.menu-item-has-children > a::after { right: 0; } } @media (min-width: 992px) { .header-section .primary-menu .main-area .main-menu ul li:hover > ul { transform: scaleY(1); } } .header-section .primary-menu .main-area .header-btn .lab-btn { display: block; } .header-section .primary-menu .main-area .header-btn a { text-transform: uppercase; font-weight: 700; } @media (max-width: 991px) { .header-section .primary-menu .main-area .header-btn a { color: #fff; } } .header-section .primary-menu .header-bar { font-size: 30px; color: #000000; } .header-section .primary-menu .header-bar i:last-child { display: none; } .header-section .primary-menu .header-bar.close { color: #000000; opacity: 1; } .header-section .primary-menu .header-bar.close i:first-child { display: none; } .header-section .primary-menu .header-bar.close i:last-child { display: block; } .header-section.menu-fixed { background: #fff; box-shadow: 0 0 3px rgba(136, 136, 136, 0.1); position: sticky; width: 100%; z-index: 99; top: 0; } .header-section.menu-fixed .header-top { display: none !important; } .header-style-2 { top: 0; } .header-style-2.menu-fixed { background-image: linear-gradient(to right top, #4b07fe, #6d1ff9, #8431f5, #9741f1, #a651ed); } .header-style-2 .primary-menu { border-bottom: 1px solid #ecf0f31a; } .header-style-2 .primary-menu .main-area .main-menu ul li:last-child a { border-bottom: none; } .header-style-2 .primary-menu .main-area .main-menu ul li a { color: #000000; padding: 35px 20px; } @media (max-width: 991px) { .header-style-2 .primary-menu .main-area .main-menu ul li a { padding: 10px 20px; border-bottom: 1px solid #ffffff36; } } .header-style-2 .primary-menu .main-area .menu-sco { justify-content: center; } @media (min-width: 1200px) { .header-style-2 .primary-menu .main-area .menu-sco { margin-left: 20px; } }
Js Structure
We are using several Js files in this Template. labartisan Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
Js Fiile Included
- jquery.js used
- waypoints.min.js used
- bootstrap.min.js used
- lightcase.js used
- isotope.pkgd.min.js used
- swiper.min.js used
- jquery.countdown.min.js used
- jquery.counterup.min.js used
- progress.js used
- functions.js used
- wow.min.js used
- and some other necessary js files
functions.js situated on assets/js/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
(function($){ "use strict"; $(window).on('load', function(){ $('.preloader').fadeOut(1000); }); $(document).ready(function() { // lightcase $('a[data-rel^=lightcase]').lightcase(); // sticky menu var fixed_top = $(".header-section"); $(window).on('scroll', function(){ if( $(this).scrollTop() > 400 ){ fixed_top.addClass("animated fadeInDown menu-fixed"); } else{ fixed_top.removeClass("animated fadeInDown menu-fixed"); } }); // search cart option $(document).on('click','.cart-option i',function(){ $(".cart-option").toggleClass("open"); }); $(document).on('click','.search i, .search-close',function(){ $(".search-input").toggleClass("open"); }); $(document).on('click','.bar-area>span, .sidemenubar',function(){ $(".sidemenubar").toggleClass("open"); }); // mobile menu responsive $(document).on('click','.header-bar',function(){ $(".header-bar").toggleClass("close"); $(".primary-menu").toggleClass("open"); }); //mobile drodown menu display $('.main-menu ul li a, .shop-menu li a').on('click', function(e) { var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(1000,"swing"); } else { element.addClass('open'); element.children('ul').slideDown(1000,"swing"); element.siblings('li').children('ul').slideUp(1000,"swing"); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(1000,"swing"); } }); // Header Section Menu Part $("ul li ul").parent("li").addClass("menu-item-has-children"); $(".shop-menu>li .shop-submenu").parent("li").children("a").addClass("dd-icon-down"); // drop down menu width overflow problem fix $('ul').parent().on('hover', function() { var menu = $(this).find("ul"); var menupos = $(menu).offset(); if (menupos.left + menu.width() > $(window).width()) { var newpos = -$(menu).width(); menu.css({ left: newpos }); } });